<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../Res/LayUI/css/layui.css" media="all">
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<style type="text/css">
img{
	width:40px;
	height: 40px;
}
.invisible {
  height: .5rem;
  top: .7rem;
}
.visible {
  height: .8rem;
  top: .55rem;
}
</style>
</head>
<body>
	<div class="demoTable">
		用户名：
		<div class="layui-inline">
			<input class="layui-input" id="name" >
		</div>
		身份证：
		<div class="layui-inline">
			<input class="layui-input" id="idcard" >
		</div>
		<button class="layui-btn" data-type="reload" >搜索</button>
		<button class="layui-btn layui-btn-primary" onclick="add(); ">添加</button>
	</div>
	<table class="layui-table"
		lay-data="{width: 792,url:'../../userAction/selectAll', page:true, id:'idTest'}"
		lay-filter="demo">
		<thead>
			<tr>
				<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
				<th lay-data="{field:'manId', width:100, sort: true, fixed: true, align:'center'}">ID</th>
				<th lay-data="{field:'manUser', width:100, align:'center'}">用户名</th>
				<th lay-data="{field:'manPwd', width:100, align:'center'}">密码</th>
				<th lay-data="{field:'manPhone', width:100, align:'center'}">电话</th>
				<th lay-data="{field:'manCardid', width:100, align:'center'}">身份证</th>
				<th lay-data="{field:'manRemark', width:100, align:'center'}">备注</th>
				<th lay-data="{fixed:'right', width:135, align:'center', toolbar: '#barDemo'}">操作</th>
			</tr>
		</thead>
	</table>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script src="../../Res/LayUI/layui.js" charset="utf-8"></script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			//监听表格复选框选择
			table.on('checkbox(demo)', function(obj) {
				console.log(obj)
			});
			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('确定删除该用户吗？', function(index) {
						layer.close(index);
						var id = data.manId;
						var url = "../../userAction/delete";
						var datas = {
							'manId' : id
						};
						$.ajax({
							asyn : true,
							type : "POST",
							url : url,
							data : datas,
							success : function(msg) {
								if (msg.state == 1) {
									layer.msg(msg.msg);
									table.reload('idTest');
								} else {
									layer.msg(msg.msg);
									table.reload('idTest');
								}
							},
							error : function(fh) {
								layer.msg(msg.msg);
							}
						});
					},"json");
				} else if (obj.event === 'edit') {
					$.ajax({
						asyn : true,
						type : "POST",
						url : "../../roleAction/updateUser",
						success : function(msg) {
							var str='<form id="Tj" action="../userAction/addOrUpdate" method="post" >'
								+'<input type="hidden" id="roleId" name="checkName">'
								+'<input type="hidden" name="manId" value='+data.manId+'>'
								+'用户名：<input type="text" name="manUser" id="manUser" lay-verify="title" placeholder="请输入用户名" value='+data.manUser+' class="layui-input"><br/>'
								+'密码：<input type="password" name="manPwd" id="manPwd" lay-verify="pass" placeholder="请输入密码" value='+data.manPwd+' class="layui-input"><br/>'
								+'电话：<input type="text" name="manPhone" id="manPhone" lay-verify="number" placeholder="请输入电话" value='+data.manPhone+' class="layui-input"><br/>'
								+'身份证：<input type="text" name="manCardid" id="manCardid" lay-verify="number" placeholder="请输入身份证" value='+data.manCardid+' class="layui-input"><br/>'
								+'备注：<input type="text" name="manRemark" id="manRemark" lay-verify="phone" placeholder="请输入备注" value='+data.manRemark+' class="layui-input"><br/>';
								for(var i=0;i<msg.length;i++){
									str+="<input type='checkbox' name='ManagerRole' value="+msg[i].roleId+">"+msg[i].roleName;
								}
								str+='</br><input id="update" type="button" value="保存" align="center">'
								+'</form>';
							layer.msg(str,{
						        time: 200000000,
						        btn: ['取消操作']
							},"json");
							$.post("../../userAction/findRole",{"manId":data.manId},function(role){
								for(var i=0;i<role.length;i++){
									$("input[name='ManagerRole']").each(function(){
										if($(this).val()==role[i].roleId){
											$(this).prop('checked',true);
										}
									});
								}
							},"json");
							$("#update").click(function(){
								var str="";
								$("input[name='ManagerRole']").each(function(){
									if($(this).is(":checked")){
										str+=$(this).val()+"-";
									}
								});
								$("#roleId").val(str);
								$("#Tj").submit();
							})
						},
						error : function(fh) {
							layer.msg("error");
						}
					});
				}
			});
			var $ = layui.$, active = {
				reload : function() {
					//执行重载
					table.reload('idTest', {
						where : {
							'manUser' : $("#name").val(),
							'manCardid' : $("#idcard").val()
						},
						page : {
							curr : 1
						}
					});
				}
			};
			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		function add() {
			$.ajax({
				asyn : true,
				type : "POST",
				url : "../../roleAction/addUser",
				success : function(msg) {
					var str='<form id="tijiao" action="../../userAction/addOrUpdate" method="post">'
						+'<input type="hidden" id="roleId" name="checkName">'
						+'用户名：<input type="text" name="manUser" id="manUser" lay-verify="title" placeholder="请输入用户名" class="layui-input"><br/>'
						+'密码：<input type="password" name="manPwd" id="manPwd" lay-verify="pass" placeholder="请输入密码" class="layui-input"><br/>'
						+'电话：<input type="text" name="manPhone" id="manPhone" lay-verify="number" placeholder="请输入电话" class="layui-input"><br/>'
						+'身份证：<input type="text" name="manCardid" id="manCardid" lay-verify="title" placeholder="请输入身份证号码" class="layui-input"><br/>'
						+'备注：<input type="text" name="manRemark" id="manRemark" lay-verify="phone"  placeholder="请输入备注" class="layui-input"><br/>';
						for(var i=0;i<msg.length;i++){
							str+="<input type='checkbox' name='ManagerRole' value="+msg[i].roleId+">"+msg[i].roleName;
						}
						str+='</br><input id="add" type="button" value="保存" align="center">'
						+'</form>';
					layer.msg(str,{
				        time: 200000000,
				        btn: ['取消操作']
					},"json");
					$("#add").click(function(){
						var str="";
						$("input[name='ManagerRole']").each(function(){
							if($(this).is(":checked")){
								str+=$(this).val()+"-";
							}
						});
						$("#roleId").val(str);
						$("#tijiao").submit();
					})
				},
				error : function(fh) {
					layer.msg("error");
				}
			});
		}
	</script>
</body>
</html>








var srt='<input type="hidden" name="manId">'
								+'用户名：<input type="text" name="manUser" id="manUser" lay-verify="title" placeholder="请输入用户名" value='+data.manUser+' class="layui-input"><br/>'
								+'密码：<input type="text" name="manPwd" id="manPwd" value='+data.manPwd+' placeholder="请输入密码" lay-verify="title" class="layui-input"><br/>'
								+'手机号：<input type="text" name="manPhone" id="manPhone" value='+data.manPhone+' lay-verify="title" placeholder="请输入手机号" class="layui-input"><br/>'
								+'身份证：<input type="text" name="manCardid" id="manCardid" value='+data.manCardid+' lay-verify="title" placeholder="请输入身份证" class="layui-input"><br/>'
								+'操作时间：<input type="date" name="optime" id="optime" value='+data.optime+' lay-verify="date" placeholder="请输入操作时间" class="layui-input"><br/>'
								+'备注：<input type="text" name="manRemark" id="manRemark" value='+data.manRemark+' placeholder="请输入备注" class="layui-input"></br>';
							for(var i=0;i<msg.length;i++){
								str+="<input type='checkbox' name='ManagerRole' value="+msg[i].roleId+">"+msg[i].roleName;
							}
							
							layer.close(index);
						    var manUser=$("#manUser").val();
						    var manPwd=$("#manPwd").val();
						    var manPhone=$("#manPhone").val();
						    var manCardid=$("#manCardid").val();
						    var manRemark=$("#manRemark").val();
						    
							var id = data.manId;
							var url = "../../userAction/updateUser";
							var datas = {
								'manId' : id,'manUser' : manUser,'manPwd' : manPwd,'manPhone' : manPhone, 'manCardid': manCardid , 'manRemark' : manRemark
							};